/**
 * @description  访问统计
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { SecondHeaderC, XYHorizontalChartsC, TreemapChartC } from '../../../comps';
import style from './index.less';

class showEchartsTwo extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }
  componentDidMount() {
    const { dispatch, args } = this.props;
    dispatch({
      type: 'visitStatisticsM/getEchartsTwo',
      payload: args,
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { args, timeStamp } = nextProps;
    if (JSON.stringify(args) !== JSON.stringify(this.props.args) || timeStamp !== this.props.timeStamp) {
      const { dispatch } = this.props;
      dispatch({
        type: 'visitStatisticsM/save',
        payload: { getEchartsTwo: { series: undefined } },
      });
      dispatch({
        type: 'visitStatisticsM/getEchartsTwo',
        payload: args,
      });
    }
  }

  render() {
    const {
      visitStatisticsM: { getEchartsTwo },
    } = this.props;
    const { args } = this.props;
    return (
      <div className={style.body_area}>
        <SecondHeaderC title={args.tenant ? '用户访问TOP5' : '机构日均用户活跃度'} />
        <div className='showEcharts3'>
          {args.tenant ? (
            <XYHorizontalChartsC yAxis={getEchartsTwo.xAxis} series={getEchartsTwo.series} title='用户名称' height='320px' width='100%' />
          ) : (
            <TreemapChartC series={getEchartsTwo.series} height='320px' width='100%' type={2} />
          )}
        </div>
      </div>
    );
  }
}
export default connect(({ visitStatisticsM }) => ({
  visitStatisticsM,
}))(showEchartsTwo);
